<template>
    <!--title为当前页标题
        组件要小，如遇list，只将item做成组件，其他的都写在页面中
    -->
    <div id="cook-detail">
        <div class="title">{{title}}</div>
        <div class="first-pannel" v-if="stepIndex == 0">
            <div class="desc-box">{{cook.desc}}</div>
            <div class="right-btn" @click="next()">准备食材</div>
        </div>
        <div class="food-pannel" v-if="stepIndex == 1">
            <div v-for="item in food">
                <div class="box-input">{{item.name}}</div>:<div class="box-input">{{item.weight}}</div>
            </div>
            <div class="right-btn" @click="next()">准备好了，开始料理</div>
        </div>
        <div class="pannel" v-for="(item,index) in stepList" v-if="index+2===stepIndex">
            <div class="step-title">步骤{{index+1}}</div>
            <div class="step-text">{{item.text}}</div>
            <div class="timer" v-if="item.timer" @click="startTimer=true;">开始倒计时</div>
        </div>
        <div class="right-btn" v-if="stepIndex==stepList.length+1" @click="complete()">完成</div>
        <z-timer :timer="5" v-if="startTimer"></z-timer>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                title:'',
                stepIndex: 0,
                cook:{},
                food:[],
                stepList:[],
                startTimer:false
            }
        },
        computed: {
            //将存在store中的数据取出

        },
        beforeCreate() {
            const that = this;
            let store = that.$store
            /*基本规则
            * 所有不需要token的请求都放在这里
            * 这里不出现window，document等DOM元素
            * 这里获得的数据都要存储在store中
            * 写法如下
            * */
            /*
            * 将所有的请求处理以数组放在promise中
            * that.data().data调用数据
            * */
            /*return Promise.all([
                store.state.homeStore.listImg = "xxx",
            ])*/
        },
        mounted: function() {
            /*
            * 所有需要token的请求都放在这里
            * 可以使用DOM元素
            * 这里的数据可以放在data中
            * */
            this.cook = JSON.parse(localStorage.cook)
            this.title = this.cook.name
            this.food = JSON.parse(localStorage.food)
            this.stepList = JSON.parse(localStorage.stepList)
            console.log(this.cook);
        },
        methods: {
            next(){
                this.stepIndex++
            },
            complete(){
                alert('完成啦！')
            },
            startTimer(item,i){

            },
        }
    }
</script>
<style lang="scss">
    #cook-detail{
        padding: 0 12px;
        box-sizing: border-box;
    }
    .title {
        text-align:  center;
        line-height:  50px;
        font-size: 20px;
    }

    .full-input {
        width: 100%;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
    }
    .box-input {
        width: 120px;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
    }
    .food-box {
        text-align: center;
    }

    .right-btn {
        right:  20px;
        margin:  20px;
        background: orange;
        color: #fff;
        padding: 6px 8px;
        border-radius: 8px;
        position: absolute;
        bottom:20px;
    }
    .desc-box {
        width: 100%;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
        height: 400px;
    }
    .step-text-box {
        width: 100%;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
        height: 100px;
    }
    .add-food-btn {
        display: inline-block;
        margin: 10px 45px 0 0;
        height: 24px;
        line-height: 22px;
        width: 24px;
        border-radius: 50%;
        border: 1px solid coral;
        color: lightcoral;
        text-align: center;
        font-size: 24px;
        font-weight: 200;
        float: right;
    }
    .add-media-box {
        text-align: center;
    }
    .add-media-btn {
        display: inline-block;
        margin: 20px;
        height: 60px;
        line-height: 58px;
        width: 60px;
        border-radius: 50%;
        border: 1px solid coral;
        color: lightcoral;
        text-align: center;
        font-size: 18px;
        font-weight: 200;
    }
    .left-btn {
        left: 20px;
        margin: 20px;
        color: orange;
        padding: 6px 8px;
        border-radius: 8px;
        position: absolute;
        bottom: 20px;
        border: 1px solid orange;
    }
    .timer-text{
        line-height: 46px;
    }
</style>

